<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- <div id="comp">
        <p>msg：{{ msg }}</p>
        <input type="button" value="修改msg" @click="setMsg()">
    </div> -->
    <div id="a"></div>
    <div id="b"></div>
</body>
<script>
    // extend基于原始Vue构造函数，创建一个新的构造函数

    /*
    var CompA=Vue.extend();
    console.log(CompA);
    
    var vm = new CompA({
        el:"#comp",
        data:{
            msg:"msg变量"
        },
        methods: {
            setMsg(){
                this.msg="重新为msg赋值";
            }
        },
    });
    */
    //extend接受一个固定参数 options ，等同于new Vue(options)里的options
    var Comp = Vue.extend({
        // el只能定义在new 关键字的配置项中
        template:"<h1 @click='print()'>compB的页面元素结构=={{msg}}</h1>",
        // data:{
        //     msg:"测试数据"
        // },
        // 组件或者extend继承函数中，data数据仓库必须是方法，且返回一个定义对象
        // 作用：为包装基于蓝本构建的vue实例 数据彼此独立
        data:function(){
            return {
                msg:"测试数据"
            }
        },
        methods: {
            print(){
                console.log("Comp方法");
            }
        },
    });

    var vm1 = new Comp({
        // el:"#a",
        // data:{
        //     msg:"测试数据"
        // }
    });
    vm1.$mount("#a");
    console.log("vm1"+vm1.$el);
    var vm2 = new Comp({
        // el:"#a",
        // data:{
        //     msg:"测试数据"
        // }
    });
    vm2.$mount("#b");
    console.log("vm2"+vm2.$el);

</script>
</html>